<template>
  <el-dialog
    v-model="show"
    :title="isUpdate ? '修改商品品牌' : '新增商品品牌'"
    width="600px"
    @close="closeModal"
    destroy-on-close
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="品牌名称" required prop="BrandName">
        <el-input
          v-model="form.BrandName"
          placeholder="请输入品牌名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="LOGO" prop="BrandLogo">
        <ImageUpload v-model="form.BrandLogo" @getImgName="n => form.BrandImgName = n"></ImageUpload>
      </el-form-item>
      <el-form-item label="顺序" prop="SortIndex">
        <el-input
          v-model.number="form.SortIndex"
          type="number"
          placeholder="请输入顺序"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeModal">取消</el-button>
        <el-button type="primary" @click="handleConfirm(formRef)">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { computed, reactive, toRef, toRefs, watch } from "vue";
import { errMsg } from "@/utils/errorMsg";
import { Edit } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import useOrderAttrStore from "@/store/modules/orderAttrs";
import useOrderDataStore from "../../../../../store/modules/orderData";
const router = useRouter();

defineOptions({
  name: "CalcEditModal",
});
const orderStore = useOrderAttrStore();
const brandNames = useOrderDataStore().brandInfo.map((item) => item.brandName);
const props = defineProps({
  open: {
    type: Boolean,
    required: true,
  },
  isUpdate: {
    type: Boolean,
    required: true,
  },
  data: {
    type: Object,
    required: true,
  },
});
const emits = defineEmits(["closeModal", "reload"]);

const state = reactive({
  form: {
    BrandName: "",
    BrandLogo: "",
    SortIndex: 0,
    BrandImgName: ''
  },
  formRef: undefined,
  rules: {
    BrandName: [
      { required: true, message: "请输入品牌名称", triggger: "change" },
      {
        triggger: "change",
        validator: checkDuplicate,
      },
    ],
    BrandLogo: [
      { required: false, message: "请至少上传一张图片", triggger: "change" },
    ],
  },
});

const { form, formRef, rules } = toRefs(state);
watch(
  () => props.open,
  (val) => {
    show.value = val;
    form.value = {
      name: "",
      picture: "",
      sort: ``,
    };
    form.value = Object.assign(form.value, props.data);

    if (!props.isUpdate) {
      for (let key in form.value) {
        if (Array.isArray(form.value[key])) form.value[key] = [];
        else form.value[key] = "";
      }
    }
  }
);
const show = ref(false);

function closeModal() {
  show.value = false;
  emits("closeModal");
}

function checkDuplicate(rule, value, callback) {
  if (brandNames.includes(value) && value !== form.value.brandName)
    callback("已存在相同品牌名称");
  callback();
}

function handleConfirm(submitFormRef) {
  submitFormRef.validate((valid, fields) => {
    if (valid) {
      try {
        // 接口请求
        if (props.isUpdate) {
          emits("reload", form.value, true);
        } else {
          form.value.BrandId = 0;
          emits("reload", form.value, false);
        }
        // emits('reload', form.value)
      } catch (error) {
        console.error("未知错误", error);
        // 请求失败处理
        ElMessage.error("修改失败：" + errMsg(error));
      }
      closeModal();
    }
  });
}
</script>
<style lang="scss">
</style>